document.addEventListener('mousemove', (event) => {
  const soap = document.querySelector('.soap')
  soap.style.left = (event.pageX) + 'px'
  soap.style.top = (event.pageY) + 'px'

  const i = document.createElement('i')
  i.style.left = (event.pageX) + 'px'
  i.style.top = (event.pageY) + 'px'
  i.style.scale = `${Math.random() * 2 + 1}`
  i.style.setProperty('--x', getRandomPosition())
  i.style.setProperty('--y', getRandomPosition())

  document.body.appendChild(i)

  function getRandomPosition() {
    return `${Math.random() * 400 - 200}px`
  }

  setTimeout(() => {
    document.body.removeChild(i)
  },2000)
})